<template>
	<view class="container">
		<view class="header">
			<view class="title1">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<z-tabs ref="tabs" class='tabs' :list="partition" :current="isSingle" @change="onClickItem"
						active-color="#0bc4e3"></z-tabs>
					<!-- <uni-segmented-control :current="isSingle" :values="partition"  @clickItem="onClickItem" styleType="text" activeColor="#1D6FE6"></uni-segmented-control> -->
				</scroll-view>
			</view>
			<view class="title2">
				已选<text>{{checklist}}</text>件，总共{{checktotal}}件商品
			</view>
		</view>
		<empty v-if="goodslist.length==0"></empty>
		<uni-swipe-action>
			<checkbox-group @change="checkboxChange">
				<block v-for="(items,index) in goodslist" :key="index">
					<label>
						<view class="box">
							<view class="business">
								<image :src="$store.state.logo" mode="aspectFill"></image>
								{{$store.state.name}}
							</view>
							<view class="">
								<uni-swipe-action-item :right-options="options"
									@click="(value)=>{bindClick(value,items.ID)}">
									<view class="goodsbox">
										<checkbox :value="items" :checked="items.ischecked" color="#0bc4e3" />
										<view class="goods">
											<image :src="items.goods.img" mode="aspectFill"></image>
											<view class="right">
												<view class="name textsl2">
													{{items.goods.name}}
												</view>
												<view class="gg">
													规格：<text v-for="itemss in items.attribute">{{itemss.val}}</text>
												</view>
												<view class="num" @click.stop="">
													<text
														class="prcie">￥{{ (parseFloat(items.price) + parseFloat(items.coupon)).toFixed(2)}}</text>
													<uni-number-box
														@change="(value)=>{bindChange(items.ID,index,items,value)}"
														v-model="items.number" style="transform: scale(0.7);" />
												</view>
											</view>
										</view>
									</view>
								</uni-swipe-action-item>
							</view>
						</view>
					</label>
				</block>
			</checkbox-group>
		</uni-swipe-action>
		<view class="" style="height: 260upx;">
		</view>
		<!-- #ifndef H5 -->
		<view class="footer" :style="{bottom:'0'}">
			<view class="left">
				<checkbox-group @change="setcheck">
					<label class="checkbox">
						<checkbox color="red" value="全选" :checked="ischecked" />全选
					</label>
				</checkbox-group>
			</view>
			<view class="right">
				<view class="lefts">
					<view class="top">
						<text>免运费</text><text>合计：</text><text>￥{{$toFiexd(totalMoney,2) }}</text>
					</view>
					<view class="bottom">
						<text>共减￥0</text>
					</view>
				</view>
				<view class="rights" @click="submit">
					结算
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="footer" :style="{bottom:$isIos()?'50px':'50px'}">
			<view class="left">
				<checkbox-group @change="setcheck">
					<label class="checkbox">
						<checkbox color="#0bc4e3" value="全选" :checked="ischecked" />全选
					</label>
				</checkbox-group>
			</view>
			<view class="right">
				<view class="lefts">
					<view class="top">
						<text>合计：</text><text>￥{{$toFiexd(totalMoney,2)}}</text>
					</view>
					<view class="bottom">
						<text>共减￥0</text>
					</view>
				</view>
				<view class="rights" @click="submit">
					结算
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from 'vuex'
	let store = useStore();
	let state = store.state;
	const {
		proxy
	} = getCurrentInstance();
	let options = reactive([{
		text: '删除',
		style: {
			backgroundColor: 'red'
		}
	}])
	let isSingle = ref(0)
	let partition = ref([])
	let partitionList = reactive([])
	let checklist = ref(0)
	let checktotal = ref(0)
	let goodslist = ref([])
	let ischecked = ref(true)
	let totalMoney = ref(0)
	let isdisabled = ref(false)
	let query = reactive({
		page: 0,
		pages: 1,
		size: 10,
	})

	function setcheck(e) {

		totalMoney.value = 0
		if (e.detail.value.length == 1) {
			checklist.value = goodslist.value.length
			let list = JSON.parse(JSON.stringify(goodslist.value))
			console.log(list, "list1")
			for (let key in list) {
				// list[key].forEach(item => {
				// 	item.ischecked = true
				// 	totalMoney.value = totalMoney.value + (item.price * item.number)
				// })
				list[key].ischecked = true
				totalMoney.value = totalMoney.value + (list[key].price * list[key].number)
			}
			goodslist.value = list
			ischecked.value = true
		} else {
			checklist.value = 0
			totalMoney.value = 0
			let list = JSON.parse(JSON.stringify(goodslist.value))

			for (let key in list) {
				console.log(list[key], key, "list2")
				// list[key].forEach(item => {
				// 	item.ischecked = false
				// })
				list[key].ischecked = false
			}

			goodslist.value = list
			// goodslist.value.forEach(item => {
			// 	item.forEach(items=>{
			// 	items.ischecked = false
			// })
			// })
			ischecked.value = false
		}
	}
	onLoad((option) => {})
	onShow(() => {
		partitionList = uni.getStorageSync("partition")
		Getpartition()
	})

	function Getpartition() {
		proxy.$request({
			url: `api/partition/?page=1&size=50`,
			method: 'get',
			success: (res) => {
				partitionList = res.data.data
				uni.setStorageSync("partition", partitionList)
				partition.value = partitionList.map(item => {
					return item.name
				})
				getGoods()
			}
		})
	}

	function onClickItem(e) {
		isSingle.value = e
		getGoods()
	}

	function getGoods() {
		proxy.$request({
			url: `api/shoppingCart/?page=${query.page}&size=${query.size}&is_single=${partitionList[isSingle.value].is_single}`,
			method: 'get',
			data: {
				page: query.page,
				size: query.size
			},
			success: (res) => {
				let list = res.data.data
				checklist.value = 0
				totalMoney.value = 0
				checktotal.value = 0
				list.forEach(item => {
					item['ischecked'] = true
					checklist.value = checklist.value + 1
					checktotal.value = checktotal.value + 1
					totalMoney.value = totalMoney.value + (item.price * item.number)
				})
				// for (let key in list) {
				// 	list[key].forEach(item => {
				// 		item['ischecked'] = true
				// 		checklist.value = checklist.value + 1
				// 		checktotal.value = checktotal.value + 1
				// 		totalMoney.value = totalMoney.value + (item.price * item.number)
				// 	})
				// }
				goodslist.value = list
			}
		})


	}

	function bindClick(e, index) {

		proxy.$request({
			url: `api/shoppingCart/`,
			method: 'DELETE',
			data: {
				id: index
			},
			success: (res) => {
				if (res.errno == 0) {
					uni.showToast({
						icon: res.errmsg
					})
					getGoods()

				}


			}
		})
	}

	function bindChange(ID, index, obj, e) {

		proxy.$request({
			url: `api/shoppingCart/`,
			method: 'PUT',
			data: {
				id: ID,
				number: e
			},
			success: (res) => {
				if (res.errno == 0) {
					if (obj.number == 0) {
						bindClick(e, ID)
					} else {
						getGoods()
					}
				}
			},
			fail(err) {
				console.log(err)
			}
		})
		setTimeout(() => {
			getGoods()
		}, 1000)
	}

	function checkboxChange(e) {
		checklist.value = e.detail.value.length
		totalMoney.value = 0
		console.log(e.detail.value)
		e.detail.value.forEach(item => {
			totalMoney.value = totalMoney.value + (item.price * item.number)
		})
		if (e.detail.value.length == checktotal.value) {
			ischecked.value = true
		} else {
			ischecked.value = false
		}
	}

	function submit() {

		console.log(checklist.value)
		let list = JSON.parse(JSON.stringify(goodslist.value))
		let attribute_list = []
		// for (let key in list) {
		// 	list[key].forEach(item => {
		// 		if (item.ischecked) {
		// 			attribute_list.push({
		// 				price_id: item.attribute_id,
		// 				number: item.number
		// 			})
		// 		}
		// 	})
		// }
		list.forEach(item => {
			if (item.ischecked) {
				attribute_list.push({
					price_id: item.attribute_id,
					number: item.number
				})
			}
		})
		// let attribute_list=JSON.parse(JSON.stringify(checklist.value)).map(item=>{
		// 	return {
		// 		price_id:item.attribute_id,
		// 		number:item.number
		// 	}
		// })
		if (attribute_list.length == 0) {
			uni.showToast({
				icon: 'none',
				title: '请选择商品'
			})
			return
		}
		proxy.$request({
			url: `api/order/`,
			method: 'post',
			data: {
				'attribute_list': attribute_list
			},
			success: (res) => {
				if (res.errno == 0) {
					proxy.$goURl('/pages/order/createorder?id=' + res.data)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.errmsg
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F3F6FD;
	}

	.container {
		.header {
			background-color: #fff;
			padding: 30upx;

			.title1 {
				color: #333;
				font-size: 48upx;
				font-weight: bold;
			}

			.title2 {
				font-size: 24upx;
				color: #999999;
				margin-top: 20upx;

				text {
					color: $color1;
				}
			}
		}

		.goodsbox {
			border-radius: 30upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding-left: 30upx;
			// margin: 15upx 20upx;

			.goods {
				display: flex;
				padding: 30upx 20upx;
				width: 100%;

				image {
					width: 200upx;
					height: 200upx;
					border-radius: 30upx;
					margin-right: 30upx;
				}

				.right {
					width: calc(100% - 230upx);

					.name {
						color: #333333;
						font-size: 32upx;
						font-weight: bold;
					}

					.gg {
						color: #999999;
						font-size: 24upx;
						margin: 20upx 0;
					}

					.num {
						color: #999999;
						font-size: 24upx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.prcie {
							color: $color1;
							font-size: 28upx;
						}
					}
				}
			}
		}

		.footer {
			width: calc(100% - 60upx);
			padding: 30upx;
			background-color: #fff;
			position: fixed;


			bottom: 50px;
			left: 0;
			display: flex;
			justify-content: space-between;

			.left {
				.checkbox {
					display: flex;
					align-items: center;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.lefts {
					margin-right: 20upx;

					.top {
						text:nth-child(1) {
							color: #999999;
							font-size: 24upx;
						}

						text:nth-child(2) {
							color: #333;
							font-size: 24upx;
							margin-left: 10upx;
						}

						text:nth-child(3) {
							color: $color1;
							font-size: 32upx;
							font-weight: bold;
						}
					}

					.bottom {
						display: flex;
						justify-content: flex-end;

						text:nth-child(1) {
							color: #333;
							font-size: 24upx;
						}

						text:nth-child(2) {
							color: $color1;
							font-size: 24upx;
							margin-left: 10upx;
						}
					}
				}

				.rights {
					color: #fff;
					background-color: $color4;
					padding: 10upx 30upx;
					border-radius: 40upx;
				}
			}
		}
	}

	.box {
		background-color: #fff;
		margin: 20upx;
		border-radius: 20upx;

		.business {
			display: flex;
			font-weight: bold;
			align-items: center;
			padding: 20upx;
			border-bottom: 1upx solid #f5f5f5;

			image {
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				margin-right: 10upx;
			}
		}
	}

	::v-deep .z-tabs-item {
		flex: none !important;
	}
</style>